<template>
  <view class="myCoupon">
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
    <TopTabs
      class="getTop"
      :list-data="tabList"
      key-name="name"
      :current="0"
      :inactive-style="inactiveStyle"
      :active-style="activeStyle"
      :line-color-obj="lineColorObj"
      :border-bom="true"
      @tabClick="tabClick"
    />
    <view class="tabFaker" />
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <TopTabs
      class="getTop"
      :list-data="tabList"
      key-name="name"
      :current="0"
      :inactive-style="inactiveStyle"
      :active-style="activeStyle"
      :line-color-obj="lineColorObj"
      @tabClick="tabClick"
    />
    <!-- #endif -->
    <view class="content">
      <view v-if="couponsList.length > 0">
        <view v-for="(item, index) in couponsList" :key="index">
          <coupon :coupon-obj="item" :text-flag="true" />
        </view>
      </view>
      <view v-else class="nocoupon">
        <image :src="vuex_imgPath+'/nocoupon.png'" />
        暂无可用的优惠券
      </view>
    </view>
  </view>
</template>

<script>
import TopTabs from '@/components/top-tabs';
import { getAllCoupon } from '@/api/shopDetail'
import coupon from '@/components/coupon'

export default {
  components: {
    TopTabs,
    coupon
  },
  data() {
    return {
      inactiveStyle: {
        fontSize: '28rpx'
      },
      activeStyle: {
        fontSize: '28rpx',
        transform: 'scale(1)',
        fontWeight: '600',
        color: '#FF5533'
      },
      lineColorObj: {
        width: '60',
        bgUrl: `#FF6010`,
        height: '3',
        bottom: '0'
      },
      tabStatus: 20,
      tabList: [
        { name: '未使用', keyName: '20' },
        { name: '已过期', keyName: '40' }
      ],
      couponsList: []
    }
  },
  mounted() {
    this.getAllCoupon()
  },
  methods: {
    async getAllCoupon() {
      const { memberId } = this.vuex_accountInfo
      const { customerId } = this.vuex_memberInfo
      const params = {
        useStatus: this.tabStatus,
        custId: memberId,
        customer_id: customerId
      }
      const res = await getAllCoupon(params)
      if (res.code == 0) {
        this.couponsList = res.couponLists.map((item) => {
          var applRangeText = item.applRange == 0 ? '全场通用' : item.applRange == 1 ? '指定分类' : item.applRange == 3 ? '指定商品':''
          return { ...item, couponValue: item.amount, applCategoryIntroduce: item.applCategoryIntroduce, allTimer: `${item.useBegtime}-${item.useEndtime}`,
            couponType: item.topicType,couponUseCondition:item.useCondition, couponUseStatus: this.tabStatus == 20 ? 0 : -1, }
        })
      }
    },
    tabClick(e) {
      this.tabStatus = e.keyName
      this.getAllCoupon()
    }
  }
}
</script>

<style scoped lang="scss">
.myCoupon {
  .content {
    padding: 32rpx;
    box-sizing: border-box;
    padding-top: 0rpx;
  }
  .tabFaker {
    height: 50px;
  }
  .nocoupon {
    padding-top: 174rpx;
    box-sizing: border-box;
    color: #999999;
    font-size: 28rpx;
    font-weight: 400;
    text-align: center;
    image {
      width: 260rpx;
      height: 232rpx;
      display: block;
      margin: 0 auto;
      margin-bottom: 44rpx;
    }
  }
}
</style>
